<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:sigecComp="http://java.sun.com/jsf/composite/components">
	
    	<h:outputStylesheet library="css" name="textos.css"/>    
    	<h:outputStylesheet library="css" name="bordes.css"/>
    	<h:outputStylesheet library="css" name="botones.css"/>
    	
        <h:form id="frmRepCurso">
        	<rich:panel header="#{msg['cursos_disponibles']}">
        		<rich:collapsiblePanel header="#{msg['cursos_disponibles']}"  headerClass="headerDivCollap" styleClass="mainDivCollap" 
					leftCollapsedIcon="triangleDown" leftExpandedIcon="triangleUp" switchType="client">
	        		
	        		<h:panelGrid columns="2">
	        			<h:outputText value="Programa: " />
	        			<rich:select value="#{reporteCursoAbiertoController.idPrograma}" valueChangeListener="#{reporteCursoAbiertoController.rsCargarCursosPrograma}"> 
		        			<f:selectItems value="#{reporteCursoAbiertoController.lstProgramas}" var="itemPrograma" itemLabel="#{itemPrograma.nombre}" itemValue="#{itemPrograma.idPrograma}"/>
		        			<a4j:ajax event="selectitem" execute="@this" render="pgPrgCursos, pgDetalleCupos"/>
		        		</rich:select>
	        		</h:panelGrid>
	        		
	        		<a4j:outputPanel ajaxRendered="true">
	        			<h:panelGroup layout="block" style="margin:auto; text-align:center;" styleClass="rf-p-hdr">
		        			<rich:dataScroller for="tblCursos" renderIfSinglePage="false" fastControls="hide"/>
		        		</h:panelGroup>
        					<rich:dataTable id="tblCursos" style="width:100%" value="#{reporteCursoAbiertoController.lstProgramaCursos}" var="progcurso" 
        						rows="10" rendered="#{!empty reporteCursoAbiertoController.lstProgramaCursos}">
			        			<f:facet name="header">
			        				<h:outputLabel value="Cursos" />
			        			</f:facet>
			        			
			        			<rich:column sortBy="#{progcurso.cursoPeriodo.curso.nombreCurso}" sortOrder="#{reporteCursoAbiertoController.namesOrder}" styleClass="colNombreDet">
				        			<f:facet name="header">
				        				<h:panelGrid columns="2">
				        					<h:outputLabel value="#{msg['nombre']}" />
				        					
				        					<h:panelGroup layout="block" style="float:right">
			        							 <a4j:commandLink render="tblCursos" action="#{reporteCursoAbiertoController.sortByNames}" >
			        							 	<h:graphicImage library="images/button" name="sortArrow.png" height="12" style="border:0px;"/>
			        							 </a4j:commandLink>
			        						</h:panelGroup>
				        				</h:panelGrid>
				        			</f:facet>
				        			<a4j:commandLink value="#{progcurso.cursoPeriodo.curso.nombreCurso}" action="#{reporteCursoAbiertoController.btnAdministrarCursoAbierto(progcurso.cursoPeriodo)}">
				        				<f:setPropertyActionListener target="#{administrarCursoController.cursoPeriodo}" value="#{progcurso.cursoPeriodo}"/>
				        			</a4j:commandLink>
			        			</rich:column>
			        			
			        			<rich:column>
				        			<f:facet name="header">
				        				<h:outputLabel value="#{msg['descripcion']}" />
				        			</f:facet>
				        			<h:outputText value="#{progcurso.cursoPeriodo.curso.generalidadesCurso}" />
			        			</rich:column>
			        			
			        			<rich:column>
				        			<f:facet name="header">
				        				<h:outputLabel value="Inicio del curso" />
				        			</f:facet>
				        			
			        				<h:outputText value="#{progcurso.cursoPeriodo.periodoAcademico.fechaInicio}" style="white-space:nowrap; text-align:center;">
			        					<f:convertDateTime pattern="#{msg['dd_MMM_yyyy']}"/>
			        				</h:outputText>
			        			</rich:column>
			        			
			        			<rich:column>
				        			<f:facet name="header">
				        				<h:outputLabel value="Fin del curso" />
				        			</f:facet>
				        			
			        				<h:outputText value="#{progcurso.cursoPeriodo.periodoAcademico.fechaFin}" style="white-space:nowrap; text-align:center;">
			        					<f:convertDateTime pattern="#{msg['dd_MMM_yyyy']}"/>
			        				</h:outputText>
				        			
			        			</rich:column>
			        			
			        			<rich:column>
				        			<f:facet name="header">
				        				<h:outputLabel value="Lugar" />
				        			</f:facet>
				        			<h:outputText value="#{progcurso.cursoPeriodo.lugarCapacitacion}" />
			        			</rich:column>
			        			
			        			
			        			<rich:column filterValue="#{reporteCursoAbiertoController.nameFilter}"
	                				filterExpression="#{fn:containsIgnoreCase(progcurso.cursoPeriodo.estadoProceso, reporteCursoAbiertoController.nameFilter)}">
				        			<f:facet name="header">
				        				<h:panelGrid columns="2" style="width:100%;">
				        					<h:outputLabel value="Estado" />
				        					
				        					<rich:select value="#{reporteCursoAbiertoController.nameFilter}" defaultLabel="Seleccione" >
					                           <f:selectItems value="#{reporteCursoAbiertoController.itemsEstado}" />
					                           <a4j:ajax render="tblCursos" execute="@this" event="selectitem" />
					                       </rich:select>
				        				</h:panelGrid>
				        			</f:facet>
				        			<center>
				        				<h:outputText value="#{progcurso.cursoPeriodo.estadoProceso}" />
				        			</center>
			        			</rich:column>
			        			
			        		</rich:dataTable>
	        				
		        		
	        		</a4j:outputPanel>
	        	</rich:collapsiblePanel>	
        	</rich:panel>
        	
        </h:form>
        
</ui:composition>